// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

@mixin button-variant($start-color, $end-color, $color: $white, $border-color: $btn-default-border) {
  @include gradient-vertical($start-color: $start-color, $end-color: $end-color);
  @include reset-filter();
  border: 1px solid $border-color;
  color: $color;
  text-shadow: 0 1px rgba(0, 0, 0, .1);

  &:hover {
    @include box-shadow(0 1px 1px rgba(0, 0, 0, .2));
    text-shadow: 0 1px rgba(0, 0, 0, .3);
  }

  // in these cases the gradient won't cover the background, so we override
  &:hover,
  &:focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    @include gradient-vertical($start-color: $start-color, $end-color: darken($end-color, 5%));
    @include reset-filter();
    color: $color;
    background-color: darken($end-color, 5%);
    border: 1px solid darken($border-color, 5%);
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    @include gradient-vertical($start-color: $start-color, $end-color: darken($end-color, 10%));
    @include reset-filter();
    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, .3));
    text-shadow: 0 1px rgba(0, 0, 0, .3);
    border: 1px solid darken($border-color, 10%);
  }

  &:focus {
    @include box-shadow(inset 0 0 0 1px $white);
    border: 1px solid $border-color;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      @include gradient-vertical($start-color: $start-color, $end-color: $end-color);
      @include reset-filter();
      @include box-shadow(none);
      background-color: $start-color;
      border: 1px solid $border-color;
    }
  }

  .badge {
    color: $border-color;
    background-color: $color;
  }
}
